<template>
  <div class="wrap">
  	<!-- header -->
  	<header class="index-head">
			<div class="ad_text">
				<h1>COMPUTERS 高端电脑品牌</h1>
				<p>——   HIGH END COMPUTER BRAND   ——</p>
				<router-link to="/proList" class="btn" >顶级配置 轻薄笔记本电脑</router-link>
			</div>
  	</header>
  	
  	<!-- content -->
  	<div class="index-content">
			<div class="about">
				<div class="title">
					<h1>关于我们</h1>
					<p>About us</p>
				</div>
				<div class="content">
					<img src="../assets/about.jpg" class="about_pic" alt="" />
					<div>
						<p>上海某某电脑网络有限公司是一家整合创意价值与服务优势，专注于电脑产业的综合电子产品公司。</p>
						<p>公司自2003年创业以来，始终以创造世界一流产品为奋斗目标，积极推动事业向多元化和全球化发展。目前，我们在全球以光学为核心的影像系统产品、办公产品以及工业产品等领域发挥着巨大的作用，通过在美洲、欧洲、大洋洲、亚洲和日本地区建立区域性总部，展开全球化多种经营战略。</p>
						<p>基于"共生"理念，2009年，我们启动旨在实现以技术服务社会，成为全球范围内被信赖、受尊敬的企业这一目标的"全球优良企业集团构想"，积极推行"整体最佳"和"重视利润"的意识改革和经营革新活动，构建了今日我们的企业体制。</p>
					</div>
					<router-link to="/newsList" class="btn" title="查看更多">查看更多</router-link>
				</div>
			</div>
			<div class="news">
				<div class="title">
					<h1>新闻中心</h1>
					<p>News Center</p>
				</div>
				<div class="content">
					<ul>
						<li>
							<router-link to="/newsList"><img src="../assets/news_pic.jpg" class="news_pic" alt="" /></router-link>
							<div>
								<p class="new_title">
									</router-link to="/newsList">[资讯动态]</router-link> <router-link to="/newsList">干得过XX吗?X</router-link>
								</p>
								<p class="time">2016-06-13</p>
								<p class="con">WWDC 2016大会即将召开，据说在软件与系统方面，有很多让人值得期待的地方。</p>
							</div>
						</li>
						<li>
							<router-link to="/newsList"><img src="../assets/news_pic2.jpg" class="news_pic" alt="" /></router-link>
							<div>
								<p class="new_title">
									<router-link to="/newsList">[资讯动态]</router-link> <router-link to="/newsList">全球刮起WWDC</router-link>
								</p>
								<p class="time">2016-06-13</p>
								<p class="con">北京时间6月14日凌晨1点，XX将举办2016年全球开发者大会（Worldwid</p>
							</div>
						</li>
						<li>
							<router-link to="/newsList"><img src="../assets/news_pic3.jpg" class="news_pic" alt="" /></router-link>
							<div>
								<p class="new_title">
									<router-link to="/newsList">[资讯动态]</router-link> <router-link to="/newsList">XX科技现XX神</router-link>
								</p>
								<p class="time">2016-06-12</p>
								<p class="con">在今年XX的中低端中，有一款神器XXX诞生，那就是650/652。一开始有人质疑</p>
							</div>
						</li>
						<li>
							<router-link to="/newsList"><img src="../assets/news_pic4.jpg" class="news_pic" alt="" /></router-link>
							<div>
								<p class="new_title">
									<router-link to="/newsList">[资讯动态]</router-link> <router-link to="/newsList">离开XX的怀抱依</router-link>
								</p>
								<p class="time">2016-06-12</p>
								<p class="con">近日，国外媒体称由XXPC业务分拆后而组建的新公司VXXX日前宣布，公司将迎来组</p>
							</div>
						</li>
					</ul>
					<router-link to="/newsList" class="btn" title="查看更多">查看更多</router-link>
				</div>
			</div>
			<div class="partner_server">
				<div class="partner">
					<div class="title">
						<h1>合作伙伴</h1>
						<p>Cooperation</p>
					</div>
					<div class="content">
						<img src="../assets/niq6_y5ao.jpg" alt="" />
						<img src="../assets/zlnj_6f4l.jpg" alt="" />
						<img src="../assets/nwlj_nv4r.jpg" alt="" />
						<img src="../assets/u65d_d9ri.jpg" alt="" />
						<img src="../assets/jl4n_rwky.jpg" alt="" />
						<img src="../assets/ehwb_o814.jpg" alt="" />
						<img src="../assets/waeo_xzo0.jpg" alt="" />
						<img src="../assets/r6lw_k2vu.jpg" alt="" />
					</div>
				</div>
				<div class="server">
					<div class="title">
						<h1>我们的服务</h1>
						<p>Service</p>
					</div>
					<div class="content">
						<ul>
							<li>
								<img src="../assets/Heart_71.png" alt="" />
								<p>社会责任</p>
							</li>
							<li>
								<img src="../assets/science.png" alt="" />
								<p>科技创新</p>
							</li>
							<li>
								<img src="../assets/wrench.png" alt="" />
								<p>售后服务</p>
							</li>
							<li>
								<img src="../assets/certificate_87.png" alt="" />
								<p>定制服务</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="product">
				<div class="title">
					<h1>热卖产品</h1>
					<p>PRODUCT</p>
				</div>
				<div class="content">
					<ul>
						<li>
							<img src="../assets/pro_pic.jpg" class="pro_pic" alt="" />
							<div>
								<strong class="pro_title">X硕XXXPad</strong>
								<p class="name">平板电脑</p>
								<p class="price marprice">市场价: <span>2000.00</span></p>
								<p class="price">价格: <span>1299.00</span><p>
								<p class="note">买即得XX视频VIP</p>
							</div>
						</li>
						<li>
							<img src="../assets/pro_pic2.jpg" class="pro_pic" alt="" />
							<div>
								<strong class="pro_title">X想ThiXXX</strong>
								<p class="name">平板电脑</p>
								<p class="price marprice">市场价: <span>6000.00</span></p>
								<p class="price">价格: <span>5599.00</span><p>
								<p class="note">热销型号满千减百不封</p>
							</div>
						</li>
						<li>
							<img src="../assets/pro_pic3.jpg" class="pro_pic" alt="" />
							<div>
								<strong class="pro_title">X为MX平板电脑</strong>
								<p class="name">平板电脑</p>
								<p class="price marprice">市场价: <span>2000.00</span></p>
								<p class="price">价格: <span>1488.00</span><p>
								<p class="note">热销型号满千减百不封</p>
							</div>
						</li>
						<li>
							<img src="../assets/pro_pic4.jpg" class="pro_pic" alt="" />
							<div>
								<strong class="pro_title">X星千小XGaX</strong>
								<p class="name">平板电脑</p>
								<p class="price marprice">市场价: <span>2000.00</span></p>
								<p class="price">价格: <span>1199.00</span><p>
								<p class="note">热销型号满千减百不封</p>
							</div>
						</li>
						<li>
							<img src="../assets/pro_pic5.jpg" class="pro_pic" alt="" />
							<div>
								<strong class="pro_title">X想YOXXTa</strong>
								<p class="name">平板电脑</p>
								<p class="price marprice">市场价: <span>2000.00</span></p>
								<p class="price">价格: <span>1909.00</span><p>
								<p class="note">热销型号满千减百不封</p>
							</div>
						</li>
						<li>
							<img src="../assets/pro_pic6.jpg" class="pro_pic" alt="" />
							<div>
								<strong class="pro_title">紫XXXMZXX</strong>
								<p class="name">平板电脑</p>
								<p class="price marprice">市场价: <span>500.00</span></p>
								<p class="price">价格: <span>189.00</span><p>
								<p class="note">热销型号满千减百不封</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
  	</div>
  	
  	<!-- footer -->
  	<footerV></footerV>
  </div>
</template>

<script>
import footer from './public/footer'
export default {
	components: {
		footerV : footer
	},
	data () {
		return {
			menu : false,
		}
	},
	methods : {
  		menus (){
				this.menu = !this.menu;
			},
	}
}
	
</script>


<style type="text/css">
	/* index.style */
	
	.index-head{
		background: url('../assets/index_ad.jpg') center center no-repeat; padding: 0.15rem 0.1rem; background-size:5.14rem 3.6rem !important;
	}
	.ad_text{
		clear: both; margin: 0.65rem auto 0.7rem; text-align: center; color: #fff;
	}
	.ad_text h1{
		font-size: 0.2rem; line-height: 0.4rem;
	}
	.ad_text .btn{
		display: block; width: 1.88rem; height: 0.5rem; background:rgba(74,134,232,1); color: #fff; line-height: 0.5rem; margin: 0.2rem auto;
	}
	
	.index-content .title{
		color: #5a5a5a; margin: 0.3rem 0 0.2rem;
	}
	.index-content .title h1{
		font-size: 0.18rem;
	}
	.index-content .title p{
		font-size: 0.16rem;
	}
	.about .about_pic{
		width:100%;
	}
	.about .content p{
		font-size: 0.14rem; line-height: 0.25rem; color: #5a5a5a; text-indent: 2em; margin-bottom: 0.15rem; padding: 0 0.08rem;
	}
	.index-content .btn{
		display: block;background:rgba(12,159,240,1);  border-radius: 0.03rem 0.03rem 0.03rem 0.03rem; width: 1.25rem; height: 0.42rem; margin:0.3rem auto 0; color: #fff; text-align: center; line-height: 0.42rem;
	}
	
	.news .content{
		padding: 0 0.05rem; 
	}
	.news .content .news_pic{
		width: 1rem; height: 0.9rem; float: left; margin-right: 0.05rem;
	}
	.news .content li{
		margin-bottom: 0.1rem; border-bottom: 0.01rem dashed #e2e2e2; padding-bottom: 0.1rem; overflow: hidden;
	}
	.news .content .new_title a{
		color: #5A5A5A; line-height: 0.2rem;
	}
	.news .content .new_title a:hover{
		color: #0064D4;
	}
	.news .content .time,.news .content .con{
		color: #666; line-height: 0.17rem;
	}
	
	.partner_server{
		width: 100%; background: url('../assets/partner_bg.jpg') center 0 no-repeat; padding-bottom: 0.4rem; margin-top: 0.3rem; background-size:13rem 9rem !important; overflow: hidden;
	}
	.partner_server .title p{
		color: #fff; 
	}
	.partner_server .title{
		color: #fff; margin: 0.3rem 0 0.25rem;
	}
	.partner .content img{
		width:45%; margin-left: 0.09rem; margin-bottom: 0.1rem; height: 0.7rem;
	}
	.server .content li{
		width: 40%; float: left; margin-left: 0.2rem; color: #fff; margin-bottom: 0.3rem; text-align: center;
	}
	.server .content li img{
		width: 0.7rem; height: 0.6rem;
	}
	.server .content li p{
		font-size:0.16rem; margin: 0.15rem 0;
	}	
	
	.product .content {
		padding: 0 0.05rem;
	}
	.product .content li{
		width: 40.9%; float: left; border: 0.01rem solid rgb(238, 238, 238); padding: 0.15rem 0.1rem; overflow: hidden; margin-bottom: 0.12rem;-webkit-transition: 0.3s; transition: 0.3s;
	}
	.product .content li:nth-of-type(2n){
		margin-left: 0.12rem;
	}
	.product .content .pro_pic{
		width: 1.2rem; height: 1.2rem;
	}
	.product .content li:hover{
		border-color: rgb(255, 102, 0); -webkit-transition: 0.3s; transition: 0.3s;
	}
	.product .content .pro_title,.product .content .note{
		color: #5A5A5A;
	}
	.product .content .name{
		color:#0064d4;
	}
	.product .content .name:hover{
		color: #2c90ff;
	}
	.product .content .price{
		color:#acacac;
	}
	.product .price span{
		color: #ff3c00;
	}
	.product .marprice span{
		color: #666; text-decoration: line-through;
	}
	
	
	/* 导航动画 */
	.slide-fade-enter-active {
	  transition: all .3s ease;
	  -webkit-transition: all .3s ease;
	}
	.slide-fade-leave-active {
	  transition: all .5s;
	  -webkit-transition: all .5s;
	}
	.slide-fade-enter, .slide-fade-leave-active {
	  transform: translateX(-2rem); opacity: 0; filter: aplha(opacity:0);
	  -webkit-transform: translateX(-2rem); opacity: 0; filter: aplha(opacity:0);
	}
</style>


































